<template>
	<view>
		<cu-custom title="" @rightClick="rightClick" rightText="发表"></cu-custom>

		<view class="margin-top padding bg-white">
			<u--textarea v-model="value" placeholder="这一刻的想法......" border="none"></u--textarea>
			
			<view class="margin-top">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="3" v-for="(item,index) in hostImg" :key="index">
						<view class="bg-img margin-lr-sm" style="position: relative;">
							<image style="width: 100%; height: 100%;" :src="item" @tap="showImg(index)"
								mode="aspectFill"></image>
							<view class="img-close" @tap.stop="DelImg(index)">
								<u-icon name="close-circle-fill" color="#de3e58" size="40rpx"></u-icon>
							</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="margin-left-sm flex align-center justify-center bg-img radius solid-img"
							@tap="ChooseImage" v-if="hostImg.length < 4">
							<u-icon name="plus" color="#aaa" size="50rpx"></u-icon>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		
		<view class="flex flex-between padding-lr margin-top-xl">
			<view class="flex align-center">
				<u-icon name="map" size="46rpx"></u-icon>
				<text class="text-lg margin-left-sm">所在位置</text>
			</view>
			<view class="">
				<u-icon name="arrow-right" size="32rpx"></u-icon>
			</view>
		</view>
		<view class="flex flex-between padding-lr margin-top-xl">
			<view class="flex align-center">
				<u-icon name="bell" size="46rpx"></u-icon>
				<text class="text-lg margin-left-sm">提醒谁看</text>
			</view>
			<view class="">
				<u-icon name="arrow-right" size="32rpx"></u-icon>
			</view>
		</view>
		<view class="flex flex-between padding-lr margin-top-xl">
			<view class="flex align-center">
				<u-icon name="account" size="46rpx"></u-icon>
				<text class="text-lg margin-left-sm">谁可以看</text>
			</view>
			<view class="flex align-center">
				<text class="margin-right-xs">公开</text>
				<u-icon name="arrow-right" size="32rpx"></u-icon>
			</view>
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				
				// 选择的本地图片路径
				hostImg: [],
				// 已上传服务器的图片名称
				serverImg: [],
			}
		},
		onShow() {

		},
		methods: {
			//点击导航右边
			rightClick() {

			},
			
			// 选择图片
			ChooseImage(e) {
				uni.chooseImage({
					count: 1,
					success: e => {
						this.hostImg = this.hostImg.concat(e.tempFilePaths[0]);
						this.upload(e.tempFilePaths[0])
					}
				});
			},
			
			// 上传图片到服务器
			upload(url) {
				this.$http.upload(url).then(res => {
					this.hostImg = this.hostImg.concat(url);
					this.serverImg = this.serverImg.concat(res)
				})
			},
			
			
			// 预览图片
			showImg(index) {
				uni.previewImage({
					current: index,
					urls: this.hostImg
				});
			},
			
			// 删除图片
			DelImg(index) {
				uni.showModal({
					title: '提示',
					content: '即将取消上传这张图片，请确认？',
					success: e => {
						if (!e.confirm) return;
						this.hostImg.splice(index, 1)
						this.serverImg.splice(index, 1)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.solid-img{
		border: 1rpx solid #e1e1e1;
		background-color: #f4f4f4;
	}
	.bg-img{
		height: 140rpx;
		width: 140rpx;
	}
	.img-close{
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}
</style>
